<template>
  <div id="check-artworks">
    <advance-table
      :columns="columns"
      :data-source="artworksNotAudit.data"
      title="艺术品审核"
      :loading="false"
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset"
      :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) =>
          `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }"
    >
      <template slot="statusTitle">
        状态<a-icon style="margin: 0 4px" type="info-circle" />
      </template>
      <template slot="status" slot-scope="{ text }">
        <div
          class="status-text"
          :class="{
            'status-finish': text == 'success',
            'status-refushed': text == 'refushed',
            'status-audit': text == 'audit',
            'status-selling': text == 'selling',
          }"
        >
          {{ text | statusStr }}
        </div>
      </template>
      <template slot="classify" slot-scope="{ text }">
        {{ text }}
      </template>
      <template slot="action" slot-scope="{ text }">
        <div class="action-btn">
          <router-link :to="`/checkdetail/${text.id}`">详情</router-link>
        </div>
      </template>
    </advance-table>
    <!-- <api /> -->
  </div>
</template>

<script>
import AdvanceTable from "@/components/table/advance/AdvanceTable";
// import { dataSource as ds } from "@/services";
// import Api from "@/pages/components/table/Api";
const columns = [
  {
    title: "艺术品id",
    dataIndex: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    searchAble: true,
    title: "分类",
    dataType: "select",
    dataIndex: "classify",
    scopedSlots: { customRender: "classify" },
    search: {
      selectOptions: [
        { title:"所有", value:"所有"},
        { title: "图片", value: "图片" },
        { title: "视频", value: "视频" },
      ],
    },
  },
  {
    title: "作者地址",
    dataIndex: "creator_address",
  },
  {
    title: "合集id",
    dataIndex: "collection_id",
  },
  {
    searchAble: true,
    dataIndex: "status",
    dataType: "select",
    slots: { title: "statusTitle" },
    scopedSlots: { customRender: "status" },
    search: {
      selectOptions: [
        { title: "审核中", value: "审核中" },
        { title: "审核成功", value: "审核成功" },
        { title: "审核失败", value: "审核失败" },
        { title: "已上架", value: "已上架" },
      ],
    },
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];

const dataSource = [];

for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i,
    id: "NO " + i,
    title: "艺术品标题",
    classify: Math.floor(Math.random() * 3),
    creator_address: "0x78ebe88b6DA6F79d851979CD349231937eEB9c53",
    collection_id: Math.floor(Math.random() * 10),
    status: Math.floor(Math.random() * 3),
  });
}

import { mapState } from "vuex";
export default {
  name: "Table",
  components: { AdvanceTable },
  filters: {
    statusStr(val) {
      switch (val) {
        case "audit":
          return "审核中";
        case "refushed":
          return "审核失败";
        case "success":
          return "审核成功";
        case "selling":
          return "已上架";
      }
    },

    // classifyStr(val) {
    //   switch (val) {
    //     case 0:
    //       return "图片";
    //     case 1:
    //       return "视频";
    //     case 2:
    //       return "文档";
    //   }
    // },
  },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: columns,
      dataSource: dataSource,
      conditions: {},
    };
  },
  //   created() {
  //     this.getGoodList();
  //     this.getColumns();
  //   },
  methods: {
    getGoodList() {
      //   this.loading = true;
      //   const { page, pageSize, conditions } = this;
      //   ds.goodsList({ page, pageSize, ...conditions }).then((result) => {
      //     const { list, page, pageSize, total } = result.data.data;
      //     this.dataSource = list;
      //     this.page = page;
      //     this.total = total;
      //     this.pageSize = pageSize;
      //     this.loading = false;
      //   });
    },
    getColumns() {
      //   ds.goodsColumns().then((res) => {
      //     this.columns = res.data;
      //   });
    },
    onSearch(conditions, searchOptions) {
      this.page = 1;
      this.conditions = conditions;
      let queryData = {
        pageIndex: this.page.toString(),
        pageSize: this.pageSize.toString(),
        status: "审核中",
        classify: "所有",
      };
      searchOptions.forEach((item) => {
        if (item.field == "status") {
          queryData.status = item.value;
        }
        if (item.field == "classify") {
          queryData.classify = item.value;
        }
      });
      this.$store.dispatch("artworksNotAudit", queryData);
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.$store.dispatch("artworksNotAudit", {
        pageIndex: this.page.toString(),
        pageSize: this.pageSize.toString(),
      });
    },
    onRefresh(conditions) {
      this.conditions = conditions;
      this.$store.dispatch("artworksNotAudit", {
        pageIndex: this.page.toString(),
        pageSize: this.pageSize.toString(),
      });
    },
    onReset(conditions) {
      this.conditions = conditions;
      let queryData = {
        pageIndex: this.page.toString(),
        pageSize: this.pageSize.toString(),
        status: "审核中",
        classify: "所有",
      };
      conditions.forEach((item) => {
        if (item.field == "status") {
          queryData.status = item.value;
        }
        if (item.field == "classify") {
          queryData.status = item.value;
        }
      });
      this.$store.dispatch("artworksNotAudit", queryData);
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.$store.dispatch("artworksNotAudit", {
        pageIndex: this.page.toString(),
        pageSize: this.pageSize.toString(),
      });
    },
  },
  computed: {
    ...mapState({
      artworksNotAudit: (store) => store.artwork.artworksNotAudit,
    }),
  },
  watch: {
    artworksNotAudit(newValue) {
      if (newValue.count != undefined) {
        this.total = newValue.count;
      }
    },
  },
  mounted() {
    this.$store.dispatch("artworksNotAudit", {
      pageIndex: this.page.toString(),
      pageSize: this.pageSize.toString(),
      status: "审核中",
      classify: "所有",
    });
  },
};
</script>

<style lang='less' scpoed>
#check-artworks {
  white-space: nowrap;
  .status-text {
    display: inline-block;
    padding: 5px 8px;
    color: #fff;
    border-radius: 99px;
    font-size: 12px;
    white-space: nowrap;
  }
  .status-finish {
    background: var(--themeColor4);
  }
  .status-refushed {
    background: var(--themeColor1);
  }
  .status-audit {
    background: var(--themeColor2);
  }
  .status-selling {
    background: var(--themeColor4);
  }
  .action-btn {
    white-space: nowrap;
  }
}
</style>